<template>
  <div class="h5-wrapper">
    <keep-alive :include="['LayoutPage']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
/*
组件缓存
组件缓存 keep-alive
问题:从面经 点到 详情页，又点返回，数据重新加载了  --> 希望回到原来的位置
原因:路由跳转后，组件被销毁了 返回回来组件又被重建了，所以数据重新被加载
解决: Keep-alive

1.keep-alive是什么
  keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
  keep-alive 是一个抽象组件:它自身不会染成一个 DOM 元素，也不会出现在父组件链中。
2.keep-alive的优点 
  在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM
  减少加载时间及性能消耗，提高用户体验
3.keep-alive的三个属性
  include: 组件名数组，只有匹配的组件会被缓存
  exclude: 组件名数组，任何匹配的组件都不会被缓存
  max: 最多可以缓存多少组件实例
4 包裹了keep-alive 
  需求: 只希望Layout被缓存，include配置:include="组件名数组"   
  一级路由匹配的组件都会被LayoutPage组件(被缓存) 
   - 多两个生命周期
     - actived 激活时，组件被看到时触发
     - deactived 失活时，离开页面组件看不见触
   ArticleDetailPage组件(未被缓存)
   
*/
export default {
  name: "h5-wrapper",
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
</style>
<style lang="less" scoped>
.h5-wrapper {
  .content {
    margin-bottom: 51px;
  }

  .tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: flex;
    background: #fff;
    border-top: 1px solid #e4e4e4;

    a {
      flex: 1;
      text-decoration: none;
      font-size: 14px;
      color: #333;
      -webkit-tap-highlight-color: transparent;

      &.router-link-active {
        color: #fa0;
      }
    }
  }
}
</style>